import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useAppStore } from '@/store/app'
import { useImageCutStore } from '@/store/cut-image'
import API from '@/http'
import { upload } from '@/http/upload/uploadImage'

/**
 * 使用者裁切圖片的 composition
 * @param Ref params.inputRef input file 的 ref
 * @param Reactive params.avatar 使用者的頭像
 * @param Function params.onFinish 提供給外部注入的 callback，當裁切圖片完成後執行
 * @returns {Object} 返回一個物件，包含 onImageLoad 方法
 */
export default function useCutImage({ inputRef, onFinish = async () => {} }) {
  const { open, close } = useImageCutStore()

  /**
   * 裁切圖片後的 callback
   * 1. 上傳新的圖片
   * 2. 更新使用者資料
   * 3. 關閉裁切圖片的 dialog
   *
   * @param {File} file
   */
  async function _onImageCut(file) {
    try {
      const newAvatarPath = await upload(file)
      const newAvatarUrl = useAppStore().appConfig.config.img_url + newAvatarPath
      await _updateAvatar(newAvatarUrl)
      onFinish && (await onFinish(newAvatarUrl))
    } catch (e) {
      console.error(e)
    } finally {
      inputRef.value.value = ''
      close()
    }
  }

  /**
   * 更新使用者的頭像
   * @param {String} newAvatarUrl 圖片路徑
   * @returns {Promise<void>}
   */
  async function _updateAvatar(newAvatarUrl) {
    const { userData } = storeToRefs(useAccountStore())
    userData.value.avatar = newAvatarUrl
    await API.Auth.update({ data: { avatar: newAvatarUrl } })
  }

  /**
   * 綁定 input file 的 change 事件
   * 當選擇圖片後，開啟裁切圖片的 dialog
   * @param {Event} event
   */
  function onImageLoad(event) {
    if (event.target.files.length <= 0) {
      console.warn('No image selected when trying to load it')
      return
    }
    const file = event.target.files[0]
    open({ file, onImageCut: _onImageCut })
  }

  return { onImageLoad }
}
